<template>
  <div id="Statements">
    <el-radio-group size="mini" v-model="activeName" class="tabs">
      <el-radio-button @click.native="getListid(1)" label="1">河内五</el-radio-button>
      <el-radio-button @click.native="getListid(2)" label="2">澳洲五</el-radio-button>
    </el-radio-group>

    <!-- 期报表-->
    <div style="margin-top:10px;">
      <span :class="{nowColor :ends==1}" @click="addCountrys">日报表</span>

      <span :class="{nowColor :ends==2}" @click="addCountrysmonth">月报表</span>
    </div>

    <!-- 切换 -->
    <div v-if="ends==1?true:false">
      <div style="margin-top:20px">
        <el-date-picker
          class="edge"
          style="width:180px"
          size="mini"
          @change="getSTimedate"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          v-model="dayTime"
          type="date"
          placeholder="选择日期时间"
        ></el-date-picker>
        <!-- 期数 -->
        <el-select  size="mini" v-model="isuu" placeholder="请选择期数">
          <el-option
            
            v-for="item in options"
            :key="item.day"
            :label="item.day"
            :value="item.day"
          ></el-option>
        </el-select>
        <!-- 确定 -->
        <el-button @click="stocks" style="margin-left:10px" size="mini" type="primary">确认</el-button>
        <el-button style="margin-left:10px" size="mini">重置</el-button>
      </div>
      <!-- 股东列表 -->
      <div class="formdata">
        <h2>日报表</h2>
        <el-table size="mini" border show-summary :data="tableData1" style="width: 100%" :header-cell-style="{background:'#ccc'}">
          <el-table-column type="index" label="序号" min-width="80"></el-table-column>
          <!-- <el-table-column prop="index" label="总代理" min-width="80"></el-table-column> -->
          <el-table-column label="会员">
            <el-table-column prop="memberProfit.quantity" label="注数" min-width="80"></el-table-column>
            <el-table-column prop="memberProfit.itemAmount" label="下注金额" min-width="80"></el-table-column>
            <el-table-column prop="memberProfit.profit" label="会员盈亏" min-width="80"></el-table-column>
          </el-table-column>
          <el-table-column label="代理">
            <el-table-column prop label="总投" min-width="80"></el-table-column>
            <el-table-column prop="agentProfit.profit" label="盈亏" min-width="80"></el-table-column>
          </el-table-column>
          <el-table-column label="总代理">
            <el-table-column prop label="总投" min-width="80"></el-table-column>
            <el-table-column prop="generalAgentProfit.profit" label="盈亏" min-width="80"></el-table-column>
          </el-table-column>
          <el-table-column label="股东">
            <el-table-column prop="shareholderProfit.ratioAmount" label="占成金额" min-width="80"></el-table-column>
            <el-table-column prop label="占成盈亏" min-width="80"></el-table-column>
            <el-table-column prop label="赚水" min-width="80"></el-table-column>
            <el-table-column prop="shareholderProfit.profit" label="总盈亏" min-width="80"></el-table-column>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="text-align:right;margin-top:20px">
          <el-pagination
            size="mini"
            class="pageNumage"
            @current-change="handleCurrentChange"
            background
            layout="prev, pager, next"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
    <div v-if="ends==2?true:false">
      <div style="margin-top:20px">
        <!-- 登录时间 -->
        <el-date-picker
          size="mini"
          class="datay"
          v-model="startTime"
          type="date"
          placeholder="开始时间"
          value-format="yyyy-MM-dd"
          @change="getSTime"
        ></el-date-picker>
        <span style="padding: 0 20px;">至</span>
        <el-date-picker
          size="mini"
          v-model="endTime"
          type="date"
          placeholder="结束时间"
          value-format="yyyy-MM-dd"
          @change="getSTime"
        ></el-date-picker>

        <span>期数：</span>
        <el-input size="mini" style="width:180px" placeholder="期数" v-model="nesd" :disabled="true"></el-input>
        <!-- 确定 -->
        <el-button @click="shareholders" style="margin-left:10px" size="mini" type="primary">确认</el-button>
        <el-button style="margin-left:10px" size="mini">重置</el-button>
      </div>
      <!-- 股东列表 -->
      <div class="formdata">
        <h2>月报表</h2>
        <el-table size="mini" show-summary border :data="tableData" style="width: 100%" :header-cell-style="{background:'#ccc'}">
          <el-table-column type="index" label="序号" min-width="80"></el-table-column>
          <!-- <el-table-column prop="index" label="总代理" min-width="80"></el-table-column> -->
          <el-table-column label="会员">
            <el-table-column prop="memberProfit.quantity" label="注数" min-width="80"></el-table-column>
            <el-table-column prop="memberProfit.itemAmount" label="下注金额" min-width="80"></el-table-column>
            <el-table-column prop="memberProfit.profit" label="会员盈亏" min-width="80"></el-table-column>
          </el-table-column>
          <el-table-column label="代理">
            <el-table-column prop label="总投" min-width="80"></el-table-column>
            <el-table-column prop="agentProfit.profit" label="盈亏" min-width="80"></el-table-column>
          </el-table-column>
          <el-table-column label="总代理">
            <el-table-column prop label="总投" min-width="80"></el-table-column>
            <el-table-column prop="generalAgentProfit.profit" label="盈亏" min-width="80"></el-table-column>
          </el-table-column>
          <el-table-column label="股东">
            <el-table-column prop="shareholderProfit.ratioAmount" label="占成金额" min-width="80"></el-table-column>
            <el-table-column prop label="占成盈亏" min-width="80"></el-table-column>
            <el-table-column prop label="赚水" min-width="80"></el-table-column>
            <el-table-column prop="shareholderProfit.profit" label="总盈亏" min-width="80"></el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { getList } from "@/api/table";
import { Module, report4Month, report4Day, report4Issue } from "@/api/user";
import qs from "qs";
export default {
  name: "Statements",
  data() {
    return {
      module: [],
      Addtype: 1,
      activeName: "1",
      ends: 1,
      startTime: "", //开始
      endTime: "", //结束
      cracksApp: 1,
      tableData1: [], //日报表
      tableData: [], //股东列表
      total: 0,
      pageNum: 1,
      listid: "1",
      nesd: [],
      dayTime: "",
      isuu: "", //期数
      options: []
    };
  },
  created() {
    this.fetchData(this.Addtype);
    this.shareholders();
    this.stocks();
    
  },
  methods: {
    //   分页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.stocks();
    },
    getListid(num) {
      this.listid = num;
    },
    // 时间
    getSTime(t) {
      console.log(t, 777);
    },
    getSTimedate(){
      this.Issue()
    },
    addCountrys() {
      this.ends = 1;
      console.log(this.ends, 333);
    },

    addCountrysmonth() {
      this.ends = 2;
      console.log(this.ends, 555);
    },
    //  月列表
    shareholders() {
      let data = qs.stringify({
        module: this.listid,
        startDay: this.startTime,
        endDay: this.endTime
      });
      report4Month(data).then(res => {
        console.log(res.data, 888);
        if (res.data.code == 200) {
          this.tableData = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 日报表
    stocks() {
      let data = qs.stringify({
        pageNum: this.pageNum,
        pageSize: 10,
        module: this.listid,
        day: this.dayTime
      });
      report4Day(data).then(res => {
        console.log(res.data, 88800000);
        if (res.data.code == 200) {
          this.tableData1 = res.data.data;
          this.total = res.data.count;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 日报表期数
    Issue() {
      let data = qs.stringify({
        module: this.listid,
        day: this.dayTime
      });
      report4Issue(data).then(res => {
        console.log(res.data, 888);
        if (res.data.code == 200) {
          this.options = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //彩种接口
    fetchData() {
      let data = qs.stringify({});
      Module(data).then(res => {
        console.log(res.data, 888);
        if (res.data.code == 200) {
          this.module = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },

    // 计算
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总计";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += " 元";
        } else {
          sums[index] = "";
        }
      });

      return sums;
    }
  }
};
</script>
<style lang="less" scoped>
#Statements {
  margin-top: 20px;
  margin-left: 20px;
}
.nowColor {
  color: #999999;
}
/deep/.el-table th > .cell {
  position: relative;
  word-wrap: normal;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  -webkit-box-sizing: border-box;
  /* box-sizing: border-box; */
  text-align: center;
}
</style>